<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :fun-props="{
        exportBtn: false,
        delBtn: false,
      }"
      :table-props="{
        selection: false,
        delBtn: false,
        viewBtn: true,
        editBtn: false,
        menuSlot: true,
        menuWidth: 300,
        tableLayout: 'fixed',
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
      @delFun="handleDelete"
      @saveFun="onSave"
    >
      <template #menuSlot="scope :any">
        <template v-if="scope.row.state === 'NoPublish'">
          <el-divider direction="vertical" />
          <el-tooltip class="box-item" effect="dark" :content="t('crud.editText')" placement="top">
            <div class="menu-btn">
              <el-button link type="primary" icon="Edit" @click="crudRef.handleUpdate(scope.row)" />
            </div>
          </el-tooltip>
        </template>

        <template v-if="scope.row.state === 'NoPublish'">
          <el-divider direction="vertical" />
          <el-tooltip class="box-item" effect="dark" :content="t('crud.deleteText')" placement="top">
            <div class="menu-btn">
              <el-popconfirm :title="t('crud.confirmDeleteTooltip')" @confirm="crudRef.handleDel(scope.row)">
                <template #reference>
                  <el-button link type="danger" icon="Delete" />
                </template>
              </el-popconfirm>
            </div>
          </el-tooltip>
        </template>

        <template v-if="scope.row.state === 'NoPublish'">
          <el-divider direction="vertical" />
          <el-tooltip class="box-item" effect="dark" :content="t('business.notice.action.publish')" placement="top">
            <div class="menu-btn">
              <el-popconfirm :title="t('business.notice.tooltip.publish')" @confirm="handlePublish(scope.row)">
                <template #reference>
                  <el-button link type="primary" icon="VideoPlay" />
                </template>
              </el-popconfirm>
            </div>
          </el-tooltip>
        </template>
      </template>
    </yt-crud>
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import { ComponentInternalInstance } from 'vue'
import { noticeList, noticeSave, noticePublish, noticeDelete } from '@/api/business/notice'
import {useI18n} from 'vue-i18n'
import YtCrud from '@/components/common/yt-crud.vue'
import {ElPopconfirm} from 'element-plus'
const { t } = useI18n()

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { NoticeTypeEnum, NoticeStateEnum } = toRefs<any>(proxy?.useEnum('notice_type_enum', 'notice_state_enum'))

const state = reactive({
  page: {
    pageSize: 30,
    pageNum: 1,
    sortMap: { createTime: 'desc'},
  },
  total: 0,
  loading: false,
  query: {},
})

const column = ref<IColumn[]>([
  {
    label: t('business.notice.type'),
    key: 'type',
    type: 'select',
    sortable: false,
    search: false,
    editHide: true,
    colSpan: 22,
    componentProps: {
      options: NoticeTypeEnum,
    },
    rules: [{ required: true, message: t('business.notice.validator.type') }],
  },
  {
    label: t('business.notice.title'),
    key: 'title',
    search: true,
    sortable: false,
    type: 'i18nString',
    slot: false,
    formHide: false,
    colSpan: 22,

    rules: [{ required: true, message: t('business.notice.validator.title') }],
  },
  {
    label: t('business.notice.content'),
    key: 'content',
    search: false,
    hide: true,
    sortable: false,
    type: 'i18nString',
    slot: false,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 10
    },
    rules: [{ required: true, message: t('business.notice.validator.content') }],
  },
  {
    label: t('business.notice.state'),
    key: 'state',
    type: 'select',
    componentProps: {
      options: NoticeStateEnum,
    },
    tableWidth: 180,
    search: true,
    formHide: true,
    sortable: false,
    rules: [{ required: true, message: t('business.notice.validator.state') }],
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
])
const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  noticeList({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

// 保存数据
const onSave = async ({ data, cancel }: any) => {
  state.loading = true
  await noticeSave(toRaw(data)).then(()=>{
    ElMessage.success(t('operate.tooltip.success'))
    cancel()
    getData()
  }).finally(()=>{
    state.loading = false
  })
}

// 删除
const handleDelete = async (row: any) => {
  state.loading = true
  noticeDelete(row.id).then(()=>{
    ElMessage.success(t('operate.tooltip.success'))
    getData()
  }).finally(()=>{
    state.loading = false
  })
}

const handlePublish = async (row: any) => {
  state.loading = true
  noticePublish(row.id).then(()=>{
    ElMessage.success(t('operate.tooltip.success'))
    getData()
  }).finally(()=>{
    state.loading = false
  })
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>
